<template>
  <div> 
   
    <div class="line1">
      <!-- 新增 -->
      <div class="line1"> 
        <el-button type="primary" @click="findAll()">全部</el-button>
        <el-button type="success" @click="findVendor()" >供应商</el-button>
        <el-button type="success" @click="findClient()" >客户</el-button>
      </div> 
      <!--  多条件搜索 -->
      <div class="line1">
        <div class="line1">
          <el-input v-model="condition" placeholder="请输入供应商名称、信用代码"></el-input>
        </div>
        <div class="line1"> 
          <el-button type="primary" @click="search()">搜索</el-button>
        </div> 
        <div class="line1"> 
          <el-button type="success" class="el-icon-refresh" @click="refresh()" circle></el-button>
        </div> 
      </div>
    </div>
    <!-- 表格 -->
    <div>
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="name"
            label="友商名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="type"
            label="友商类型"
            align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 0">客户</div>
              <div v-if="scope.row.type == 1">供应商</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="uniformCreditCode"
            label="统一信用代码"
            width="165"
            align="center">
          </el-table-column>
          <el-table-column
            prop="abbreviation"
            label="简称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="mark"
            label="代号"
            align="center">
          </el-table-column>
          <el-table-column
            prop="encoding"
            label="编码"
            align="center">
          </el-table-column>
          <el-table-column
            prop="area"
            label="区域"
            align="center">
          </el-table-column>
          <el-table-column
            prop="adminName"
            label="经办人"
            align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="关注时间"
            width="160"
            align="center">
          </el-table-column>
            <el-table-column
            v-if="userAll.sid == 7 || role == 'manager' || role.endsWith('x')"
            label="操作"
            width="160">
            <template slot-scope="scope">
              <el-button v-if="scope.row.type == 0" type="primary" @click="push(scope.row.email)" >推送</el-button>
              <el-button class="el-icon-star-on" @click="noatt(scope.row.id)" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 分页插件 -->
    <div class="block" style="margin: auto">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=page
        :page-sizes="[5, 10, 20, 40]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>
    <!-- 推送抽屉 -->
    <div>
      <el-drawer
        title="可推送的商品列表"
        :visible.sync="drawer"
        :direction="direction"
        size='75%'>
        <!-- 推送商品列表 -->
        <div>
          <template>
            <div style="margin-top: 20px; float: right;">
              <el-button type="info" @click="toggleSelection()">取消选择</el-button>
              <el-button type="primary" @click="commit()">提交</el-button>
            </div>
            <el-table
              ref="multipleTable"
              :data="goodsData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                prop="goodsName"
                label="商品名称">
                <!-- <template slot-scope="scope">{{ scope.row.goodsName }}</template> -->
              </el-table-column>
              <el-table-column
                prop="goodsNumber"
                label="商品编号">
              </el-table-column>
              <el-table-column
                prop="meteriType"
                label="物料"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                prop="categoryType"
                label="品类">
              </el-table-column>
              <el-table-column
                prop="purity"
                label="成色">
              </el-table-column>
              <el-table-column
                prop="weight"
                label="重量（克）">
              </el-table-column>
              <el-table-column
                prop="unitPrice"
                label="单价（元/克）">
              </el-table-column>
              <el-table-column
                prop="picture"
                label="图片">
                <template slot-scope="scope">
                  <el-image style="width: 100px; height: 100px" :src="'http://localhost:8092/' + scope.row.picture">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态">
              </el-table-column>
            </el-table>
          </template>
        </div>
        <!-- 分页插件 -->
    <div class="block" style="margin: auto">
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page=page2
        :page-sizes="[5, 10, 20, 40]"
        :page-size=size2
        layout="total, sizes, prev, pager, next, jumper"
        :total=total2>
      </el-pagination>
    </div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
 export default{
  data(){
    return {
      tableData:[],
      page:1,
      size:5,
      total:0,
      page2:1,
      size2:5,
      total2:0,
      drawer: false,
      direction: 'btt',
      userAll:{},
      role:'',
      condition:'',
      goodsData:[],
      email:'',
      multipleSelection: [],
      type:-1
    }
  },
  methods:{
     //分页
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getVendorPageData()
    },
    handleCurrentChange(val) {//修改页码时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.page = val
      //发请求获取数据  调用方法
      this.getVendorPageData()
    },
    getVendorPageData: function(){
      if(this.type == -1){
        this.$axios.get("businessCompetitor/findAttBus/"+ this.page + "/"+ this.size).then(res => {
        console.log(res.data)
        // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
      }else{
        this.$axios.get("businessCompetitor/findBusByType/"+this.type+"/"+this.page+"/"+this.size).then(res => {
        console.log(res.data)
        // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
      }
      
    },
    //推送商品分页
    handleSizeChange2(val) {
      console.log(`每页 ${val} 条`);
      this.size2 = val
      this.getGoodsData()
    },
    handleCurrentChange2(val) {//修改页码时触发
      console.log(`当前页: ${val}`);
      //给当前页属性赋值
      this.page2 = val
      //发请求获取数据  调用方法
      this.getGoodsData()
    },
    getGoodsData:function(){
      let data = {
        currentPage:this.page2,
        size:this.size2
      }
      this.$axios.post("goods/selectPage/",data).then(res => {
        console.log(res.data);  
        this.goodsData = res.data.data.records
          this.total2 = res.data.data.total
      })
    },
    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    //多条件查询
    search(){
      this.page = 1
      this.$axios.get("businessCompetitor/conditionsFindAtt/"+this.condition+"/"+this.page+"/"+this.size).then(res => {
        console.log(res.data);
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.condition = ''
      })
      
    },
    //查询全部关注
    findAll(){
      this.type=-1
      this.page = 1
      this.getVendorPageData()
    },
    //查询关注的供应商
    findVendor(){
      this.type = 1
      this.page = 1
      this.getVendorPageData()
    },
    //查询关注的客户
    findClient(){
      this.type = 0
      this.getVendorPageData()
    },
    //刷新
    refresh(){
      this.type=-1
      this.page = 1
      this.getVendorPageData()
    },
    //推送
    push(email){
      this.email = email
      this.getGoodsData()
      this.drawer = true
    },
    //提交推送
    commit(){
      let data = {
        email:this.email,
        goods:this.multipleSelection
      }
      console.log(data);
      this.$axios.post("file/email",data).then(res => {

      })
    },
    //取关
    noatt(id){
      this.$axios.put("businessCompetitor/noAttBusById2/"+id+"/"+this.page+"/"+this.size).then(res => {
        console.log(res.data)
        if(res.data.code == 200){
          // 将数据渲染到页面上
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.$message.success("取关成功")
        }else{
          this.$message.error("取关失败")
        }
      })
    },
  },
  mounted:function(){
    this.getVendorPageData()

    // this.$axios.get("/user/findUserByAccount/" + window.localStorage.getItem("account")).then(res => {
    //     console.log(res.data.data);
    //     this.userAll = res.data.data;
    //     this.role = res.data.data.roleList[0].name;
    //     console.log(this.role);
    //   });
  }
}
</script>
<style scoped>
.line1{
  display: flex;
}
</style>